<template>
  <div>
    <div class="setBox">
      <h3><span>缴费项目自定义字段</span></h3>
      <div class="setContent">
        <div class="termBox" v-for="(a,index) in termList" :key="a.id">
          <el-input v-model="a.itemName" maxlength="30" show-word-limit size="small" style=" width:180px; margin:0 10px 0 0" placeholder="请输入内容"></el-input>
          <el-button v-if="a.id!=''" :disabled="a.itemName=='学费'||a.itemName=='住宿费'||a.itemName=='行李费'" size="small" type="danger" @click="drop(a.id)" plain>删除</el-button>
          <el-button v-else size="small" @click="cancelSet(index)" plain>取消</el-button>
          <el-button size="small" :disabled="a.itemName=='学费'||a.itemName=='住宿费'||a.itemName=='行李费'" type="primary" @click="saveChange(a)">保存</el-button>
        </div>
        <div class="termBox">
          <el-button type="success" icon="el-icon-plus" size="small" style="width:100%;" @click="addnew" plain>添加新项目</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      termList:[],
      flag:""
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取缴费项列表
    getList:function(){
      this.$api.systemSetup.GetPaymentItemList().then(res=>{
        //console.log("缴费项列表",res);
        this.termList = res.data.result;
      })
    },
    // 删除操作
    drop:function(id){
      this.$confirm('确定删除当前缴费项？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$api.systemSetup.DropPaymentItem(id).then(res=>{
          //console.log("删除缴费项返回",res);
          if(res.data.status=='SUCCESS'){
            this.$message({
                message:'删除成功!',
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    // 取消设置操作
    cancelSet:function(suoyin){
      this.termList.splice(suoyin,1);
    },
    saveChange:function(obg){
      console.log(obg);
      if(obg.id==""||obg.id==null||obg.id==undefined){
        this.flag = "ADD";
      }else{
        this.flag = "EDIT";
      }
      if(obg.itemName==""||obg.itemName==null||obg.itemName==undefined){
        this.$message({
            message:'请输入缴费项目名称!',
            type: 'warning'
        })
        return;
      }
      if(obg.itemName.replace(/\s+/g,"")=="学费"||obg.itemName.replace(/\s+/g,"")=="住宿费"||obg.itemName.replace(/\s+/g,"")=="行李费"){
        this.$message({
            message:'"学费","住宿费","行李费"为固定项不能修改添加',
            type: 'warning'
        })
        return;
      }
      this.$api.systemSetup.SavePaymentItem(this.flag,obg).then(res=>{
        //console.log("添加缴费项",res);
        if(res.data.status=='SUCCESS'){
            this.$message({
                message:'保存缴费项成功!',
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        // this.termList = res.data.result;
      })
    },
    addnew:function(){
      var newTerm = new Object();
      newTerm.id="";
      newTerm.itemName="";
      newTerm.state = "Normal";
      this.termList.push(newTerm);
    }
  }
}
</script>
